<template>
  <div class="brand-detail">
      
        <van-nav-bar
  
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    <ul class="top bg_ff">
      <li v-for="(item, index) in brandList" :key="index">
        <div class="img">
            <img :src="item.picUrl" />
        </div>
        <div class="top-main">{{ item.desc}}</div>
        <p >{{item.name}}</p>
        <span></span>
      </li>
    </ul>
    <ul class="main">
      <li v-for="(item, index) in branddetaillist" :key="index">
        <img :src="item.picUrl" />
        <p>{{ item.name }}</p>
        <p class="font-AB956D">￥{{ item.retailPrice }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import { brandapi } from "../../assets/api/homeapi.js";
import { branddetailapi } from "../../assets/api/homeapi.js";
export default {
  data() {
    return {
      brandList: [],
      branddetaillist: [],
    };
  },
  created() {
    brandapi({ id: this.$route.query.id }).then((res) => {
      this.brandList = res.data;
      //   console.log(res.data.data);
    }),
      branddetailapi({ brandId: this.$route.query.id }).then((res) => {
        this.branddetaillist = res.data.data.list;
        // console.log(res.data);
      });
  },methods:{
     onClickLeft(){
          history.back()
     } 
    }
};
</script>
<style lang="scss" scoped>
.brand-detail {
  height: 100%;
  padding: 0;
  .top {
    font-size: 20px;
    text-align: center;
    li {
        position: relative;
        span{
            position: absolute;
            display: block;
            width: 150px;
            height: 3px;
            background: #fff;
            top:40%;
            left: 32%;
        }
        p{
            position: absolute;
            top:24%;
            left: 28%;
            z-index: 2;
            font-size: 35px;
            color: #fff;
        }
      .img {
           overflow: hidden;
        img{
            width: 100%;
        }

      }
      .top-main {
          padding: 15px;
          margin-top: 10px;
        }
    }
  }
  .main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 50%;
      font-size: 14px;
      img {
        width: 150px;
      }
      p {
        width: 150px;
        text-align: center;
        margin-top: 10px;
        z-index: 1;
        top:20px;
       
      }
    }
  }
}
</style>